<template>
  <a-drawer :title="title" width="31%" destroyOnClose :visible="visible" @close="() => {
    this.visible = false
  }
    ">
    <a-spin :spinning="confirmLoading">
      <a-form-model ref="form" :model="entity" :rules="rules" v-bind="layout">
        <a-row>
          <a-col span="22">

            <a-form-item label="头像" :labelCol="layout.labelCol"  prop="Icon" :wrapperCol="layout.wrapperCol">
              <img alt="" style="width: 120px"  :src="entity.Icon" />
            </a-form-item>
            <a-form-model-item label="姓名" prop="Name" :labelCol="{ style: 'width: 20%;float:left;' }">
              <a-input v-model="entity.Name" autocomplete="off" />
            </a-form-model-item>
            <a-form-model-item label="性别" prop="Sex" :labelCol="{ style: 'width: 20%;float:left;' }">
              <a-input v-model="entity.Sex" autocomplete="off" />
            </a-form-model-item>
            <a-form-model-item label="手机号" prop="Phone">
              <a-input v-model="entity.Phone" autocomplete="off" />
            </a-form-model-item>
            <a-form-model-item label="地址" prop="Address">
              <a-input v-model="entity.Address" autocomplete="off" />
            </a-form-model-item><a-form-model-item label="邮箱" prop="Email">
              <a-input v-model="entity.Email" autocomplete="off" />
            </a-form-model-item>


          </a-col>
        </a-row>
      </a-form-model>
    </a-spin>
    <div :style="{
      position: 'absolute',
      right: 0,
      bottom: 0,
      width: '100%',
      borderTop: '1px solid #e9e9e9',
      padding: '5px 16px',
      background: '#fff',
      textAlign: 'right',
      zIndex: 1
    }">
      <a-button @click="close">返回</a-button>&nbsp;
    </div>
  </a-drawer>
</template>

<script>
export default {
  components: {
  },
  props: {
  },
  data() {
    return {
      layout: {
        labelCol: { span: 5 },
        wrapperCol: { span: 18 }
      },
      visible: false,
      confirmLoading: false,
      entity: {},
      title: '',
      rules: {},
    }
  },
  methods: {
    close() {
      this.visible = false
      this.entity = {}

    },
    init() {
      this.visible = true
    },
    openForm(id, title) {
      this.init()
      this.title = title
      if (id) {
        this.$http.post('/Base_Manage/Base_VIPUserInfo/GetTheData', { id: id }).then(resJson => {
          this.entity = {}
          setTimeout(() => {
            this.entity = resJson.Data
          }, 1)
        })
      }
    },

  }
}
</script>
